<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <meta name="author" content="$author-meta$" />
  <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
  <link href="https://fonts.googleapis.com/css?family=$if(googlefonts)$$for(googlefonts)$$googlefonts$$sep$|$endfor$$else$Montserrat$endif$" rel="stylesheet" />
  <style>
  @page {
    margin: 0;
    size: $if(paperwidth)$$paperwidth$$else$$if(cardwidth)$$cardwidth$$else$2in$endif$$endif$ $if(paperheight)$$paperheight$$else$$if(cardheight)$$cardheight$$else$3in$endif$$endif$;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: $if(paperwidth)$$paperwidth$$else$$if(cardwidth)$$cardwidth$$else$2in$endif$$endif$;
    height: $if(paperheight)$$paperheight$$else$$if(cardheight)$$cardheight$$else$3in$endif$$endif$;
  }
  .grid {
    display: grid;
    width: $if(paperwidth)$$paperwidth$$else$$if(cardwidth)$$cardwidth$$else$2in$endif$$endif$;
    height: $if(paperheight)$$paperheight$$else$$if(cardheight)$$cardheight$$else$3in$endif$$endif$;
    grid-template-columns: repeat($if(cols)$$cols$$else$1$endif$, calc(100% / $if(cols)$$cols$$else$1$endif$));
    grid-template-rows: repeat($if(rows)$$rows$$else$1$endif$, calc(100% / $if(rows)$$rows$$else$1$endif$));
    justify-items: center;
    align-items: center;
  }
  .wrapper {
    box-sizing: border-box;
    width: $if(cardwidth)$$cardwidth$$else$2in$endif$;
    height: $if(cardheight)$$cardheight$$else$3in$endif$;
    color: white;
    background-color: black;
  }
  @media screen {
    html, body {
      width: 100%;
      height: 100%;
    }
    .grid {
      margin: auto;
    }
  }
  </style>
</head>

<body>
  <template id="card-template">
  $if(logo)$<img class="logo" src="$logo$" alt="Logo" />$endif$
  <div class="me">
    <div class="name"><slot name="name"><span>$name$</span></slot></div>
    <div class="title"><slot name="title"><span>$title$</span></slot></div>
    <div class="coordinates">
      <p class="phone"><slot name="phone"><span>$phone$</span></slot></p>
      <p class="contact-email"><slot name="email"><span>$email$</span></slot></p>
      <p class="website"><slot name="url"><span>$url$</span></slot></p>
      <slot name="address"><div class="address">$address$</div></slot>
    </div>
  </div>
  <style>
  .logo {
    display: block;
    max-width: 75%;
    margin: auto;
    padding: .3in 0 0;
  }
  .me {
    font-family: $if(mainfont)$$for(mainfont)$'$mainfont$'$sep$, $endfor$, $else$$if(googlefonts)$$for(googlefonts)$'$googlefonts$'$sep$, $endfor$, $else$'Montserrat', $endif$$endif$sans-serif;
    font-size: 11px;
    letter-spacing: 0.8px;
    line-height: 1.7em;
    padding: 0.4cm;
  }
  .name {
    font-weight: bold;
  }
  .coordinates {
    color: #bbb;
    margin-top: 0.5cm;
    line-height: 1em;
  }
  </style>
  </template>

  $if(name)$
  <div class="wrapper" data-repeat="$if(repeat)$$repeat$$else$1$endif$">
  </div>
  $endif$

  $for(person)$
  <div class="wrapper" data-repeat="$if(person.repeat)$$person.repeat$$else$1$endif$">
    $if(person.name)$
    <span slot="name">$person.name$</span>
    $else$
    <span slot="name">$person$</span>
    $endif$
    $if(person.title)$<span slot="title">$person.title$</span>$endif$
    $if(person.phone)$<span slot="phone">$person.phone$</span>$endif$
    $if(person.email)$<span slot="email">$person.email$</span>$endif$
    $if(person.url)$<span slot="url">$person.url$</span>$endif$
    $if(person.address)$<div slot="address" class="address">$person.address$</div>$endif$
  </div>
  $endfor$

  $body$

  <script>
    (() => {
      // when a card is created using markdown, Pandoc embeds spans in paragraphs
      // we need to move these spans outside paragraphs to be detected by the template
      let paragraphs = document.querySelectorAll('.wrapper > p');
      for (let paragraph of paragraphs) {
        let wrapper = paragraph.parentElement;
        for (let element of paragraph.childNodes) {
          wrapper.appendChild(element);
        }
      }

      // repeat cards
      const maxItemsPerGrid = $if(cols)$$cols$$else$1$endif$ * $if(rows)$$rows$$else$1$endif$;
      let cards = document.querySelectorAll('.wrapper');
      for (const card of cards) {
        for (let i = 1; i < card.dataset.repeat; i++) {
          document.body.insertBefore(card.cloneNode(true), card);
        }
      }

      // spread the cards in grids
      cards = document.querySelectorAll('.wrapper');
      let cardsArray = Array.from(cards);
      while (cardsArray.length > 0) {
        const numberOfItemsToInsertInGrid = Math.min(maxItemsPerGrid, cardsArray.length);
        let grid = document.createElement('div');
        grid.className = 'grid';
        document.body.insertBefore(grid, cardsArray[0]);
        for (let card of cardsArray.slice(0, numberOfItemsToInsertInGrid)) {
          grid.appendChild(card);
        }
        cardsArray.splice(0, numberOfItemsToInsertInGrid);
      }

      // build the shadow DOM for each card
      let templateContent = document.getElementById('card-template').content;
      let styles = document.querySelectorAll('body > style');
      for (let card of cards) {
        let shadowDOM = card.attachShadow({  mode: 'open' });
        shadowDOM.appendChild(templateContent.cloneNode(true));
        for (let style of styles) {
          shadowDOM.innerHTML += '<style>' + style.innerHTML + '</style>';
        }
      }
    })();
  </script>
</body>
</html>
